{ "cep": "01310-200", "logradouro": "Avenida Paulista", "complemento": "de 1512 a 2132 - lado par", "bairro": "Bela Vista", "localidade": "São Paulo", "uf": "SP", "unidade": "", "ibge": "3550308", "gia": "1004" }
Código1:
<script>
function getDadosEnderecoCEP(cep) {
//console.log(cep); //cep recebido por padrão
var x;
x = cep.replace("-", "")
let url = 'http://viacep.com.br/ws/' + x + '/json/'
//console.log(url); //url da api
let req = new XMLHttpRequest();
req.open('GET', url);
req.onreadystatechange = () => {
if (req.readyState == 4 && req.status == 200) { //4=solicitação terminada e 200 = com sucesso
//console.log(req.responseText); //resposta do servidor
let resreq = req.responseText;
let objdadosreq = JSON.parse(resreq);
// console.log(objdadosreq); //todos os campos
//console.log(objdadosreq.logradouro); //um campo
document.getElementById('endereco').value = objdadosreq.logradouro;
document.getElementById('complemento').value = objdadosreq.complemento;
document.getElementById('bairro').value = objdadosreq.bairro;
document.getElementById('cidade').value = objdadosreq.localidade;
document.getElementById('uf').value = objdadosreq.uf;
}
}
req.send();
}
</script>
Código2:\
<div class="container">
<div class="row form-group">
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="CEP" onblur="getDadosEnderecoCEP(this.value)" />
</div>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Endereço" readonly id="endereco" />
</div>
</div>
<div class="row form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Complemento" readonly id="complemento" />
</div>
</div>
<div class="row form-group">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Bairro" readonly id="bairro" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Cidade" readonly id="cidade" />
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="UF" readonly id="uf" />
</div>
</div>
</div>